/**
 * 水球图第一个
 * @author lijj
 */

import { FC, useEffect, useRef } from "react";
import * as echarts from 'echarts';
import 'echarts-liquidfill'
const LiquidFillSt:FC<{
    countData: string
    }> = ({
        countData
    }) => {
    const echartsBox = useRef<HTMLDivElement>(null);
    let echartsClass = useRef<echarts.ECharts>()
    useEffect(() => {
        const resizeListener = () => {
            echartsClass.current?.resize()
        }
        resizeListener()
        window.addEventListener('resize', resizeListener);

        return () => {
            window.removeEventListener('resize', resizeListener);
        }
    }, [])
    useEffect(() => {
        // 初始化echarts
        setTimeout(() => {
            if (echartsBox) {
                var echarts_box_html = document.getElementById('echarts_liquidSt')!;
                echartsClass.current = echarts.init(echarts_box_html);
                ; (async () => {
                    let data = Number(countData)/60
                        var option:echarts.EChartsCoreOption = {
                            series: [{
                                type:'liquidFill',
                                data: [data,data+0.01],
                                color: ['#078FF7', '#2BDAFF'],
                                center: ['50%', '50%'],
                                radius: '95%',
                                amplitude: '5%',
                                waveLength: '80%',
                                phase: 'auto',
                                period: 'auto',
                                direction: 'right',
                                shape: 'circle',
                            
                                waveAnimation: true,
                                animationEasing: 'linear',
                                animationEasingUpdate: 'linear',
                                animationDuration: 2000,
                                animationDurationUpdate: 1000,
                            
                                outline: {
                                    show: true,
                                    borderDistance: 5,
                                    itemStyle: {
                                        color: 'none',
                                        borderColor: 'rgba(255, 255, 255, 0.1)', // 白色边框
                                        borderWidth: 3,
                                        shadowBlur: 2, // 增大模糊效果
                                        shadowColor: 'rgba(255, 255, 255, 0.1)' // 白色光斑效果
                                    }
                                },
                            
                                backgroundStyle: {
                                    color: 'rgba(255,255,255,0.1)'
                                },
                            
                                itemStyle: {
                                    opacity: 0.98,
                                    shadowBlur: 250,
                                    shadowColor: 'rgba(255, 255,255, 0.1)'
                                },
                            
                                label: {
                                    show: false
                                },
                            
                                emphasis: {
                                    itemStyle: {
                                        opacity: 0
                                    }
                                }
                            }]
                        };
                        option && echartsClass.current!.setOption(option);
                }
                )()
            }
        },10)
    }, [countData])
    return (
        <div id="echarts_liquidSt" style={{
            width: '50%', 
            height: '10rem',
            backgroundColor: 'rgba(255,255,255,0)',
        }} ref={echartsBox}></div>
    )
}

export default LiquidFillSt